/**
 * data-yk-menu 菜单，用法
 <div data-yk-menu="文件">
 <ul>
 <li>新建</li>
 <li>打开</li>
 <li>保存</li>
 <li>退出</li>
 </ul>
 </div>
 * data-yk-menu-label 菜单入口标签，如"File","Edit","View"等，这个是自动生成的，使用时只需要使用data-yk-menu即可
 * data-yk-type="openFile" 打开文件的按钮，用法<button data-yk-type="openFile">打开</button>
 *
 * 注意事项：
 * 1. 必须同时引入jquery，该脚本使用了jquery语法
 * 1. 带有data-yk-menu属性的父div的overflow属性不能更改，否则会导致布局问题
 */
let origin_menu_color1 = "#3c3f41";  // 菜单背景色
let menu_color2 = "#066591";  // 菜单标签被选中或鼠标滑动时的背景色
let menu_color3 = "#afb1b3";  // 菜单前景色，即文字颜色
let menu_state1 = false;  // 菜单是否被单击

function existsFunction(funName) {
    try {
        return typeof funName === "function";
    } catch (e) {
    }
}

function includeOnce(name) {
    function isIncluded(name) {
        let js = /js$/i.test(name);
        let es = document.getElementsByTagName(js ? 'script' : 'link');
        for (let i = 0; i < es.length; i++)
            if (es[i][js ? 'src' : 'href'].indexOf(name) !== -1) return true;
        return false;
    }

    if (!isIncluded(name)) {  // 如果没有引入，就创建新的脚本标签，并添加到DOM尾部
        let script = $("<script>");
        $(script).attr('type', 'text/javascript');
        $(script).attr('src', name);
        $('body').append(script);
    }
}

function ykInit() {
    /**
     * 处理
     */
    let elements = $("div[data-yk-menu]");  // 拿到所有带data-yk-menu属性的div，每个对应一个菜单栏按钮
    let len = elements.length;
    if (len > 0) { // 如果页面中存在菜单栏，就依次处理每个菜单列表
        for (let i = 0; i < len; i++) {
            let menuInfo = elements[i].getAttribute('data-yk-menu');  // 获得属性data-yk-menu的值，一般为‘文件’，‘帮助'等
            // 向对应的div标签下添加一个标签作为标签项
            let newEle = "<label data-yk-menu-label=" + menuInfo + ">" + menuInfo + "</label>";
            $(elements[i]).prepend(newEle);  // 在elements[i]的子元素列表最前面插入新元素
            $(elements[i]).css({display: "inline"})
        }

        // 清除菜单栏子项目（上面的float）的浮动效果，防止菜单栏和页面上其他float内容重叠
        $(elements[0]).parent().css({
            overflow: "hidden",
        })

        // 给菜单入口标签添加事件
        elements.on('click', function (e) {
            let target = $(e.target);
            if (target.prop('nodeName').toLowerCase() === "label") {
                if (menu_state1) {  // 如果菜单处于激活状态，则反激活
                    menu_state1 = false;
                    hideAllMenuList();
                } else {  // 如果菜单处于未激活状态，则处理菜单点击事件，同时设置菜单为激活状态
                    let menuLabel = $(target[0]).text();
                    showMenuList(menuLabel);
                    menu_state1 = true;  // 单击菜单标签，则激活菜单栏
                }
            } else if (target.prop('nodeName').toLowerCase() === "li") {
                ykMenuItemClicked(target);
                menu_state1 = false;  // 菜单项操作完毕，反激活菜单栏}
            }
        });

        // 给菜单添加鼠标浮动效果

        elements.on('mouseover mouseout', function (e) {
            let target = $(e.target);
            if (e.type === "mouseover") {
                if (target.prop('nodeName').toLowerCase() === "label") {
                    if (menu_state1) { // 如果菜单处于激活状态，则鼠标滑动时更改标签背景色
                        let menuLabel = $(target[0]).text();
                        showMenuList(menuLabel);
                        target.css({backgroundColor: menu_color2});
                    }
                } else if (target.prop('nodeName').toLowerCase() === "li") {
                    target.css({backgroundColor: menu_color2});
                }
            } else if (e.type === "mouseout") {
                if (menu_state1) { // 如果菜单处于激活状态，则鼠标滑动时更改标签背景色
                    target.css({backgroundColor: origin_menu_color1});
                }
            }

        })
    }

    ykResize(); //适应一次窗口大小

    window.onresize = ykResize; // 注册窗口resize事件
}

function showMenuList(menuLabel) {
    /**
     * 显示属性值为 data-yk-menu-label=menuLabel的菜单项对应的菜单下拉列表，隐藏其他菜单列表
     * @type {*|jQuery.fn.init|jQuery|HTMLElement}
     */
    let element = $("[data-yk-menu-label=" + menuLabel + "]");
    let left = element.offset().left;
    let top = element.height() + element.offset().top + 2 * Number(element.css('padding').slice(0, -2))
        - 11;  // 这里要减去11，原因未知，否则下拉列表和菜单标签之间有间隙
    hideAllMenuList();  // 确保其他菜单下拉列表隐藏
    element.css({backgroundColor: menu_color2});
    $("div[data-yk-menu=" + menuLabel + "]>ul").css({display: "inline-block", top: top, left: left, "z-index": 100});
}

function hideAllMenuList() {
    /**
     * 隐藏所有菜单标签的下拉列表
     */
    let elements = $("[data-yk-menu]>ul");
    elements.hide();
    $("[data-yk-menu-label]").css({backgroundColor: origin_menu_color1});
}

function openFile(button) {

}

function updateGridJsData(data, element_id) {
    $("#"+element_id).empty();
    let gridjs_sheet = new gridjs.Grid(data);
    gridjs_sheet.render(document.getElementById(element_id));
    gridjs_sheet.forceRender(document.getElementById(element_id)); // 必须补一句forceRender()，否则数据不更新
}

function ykResize() {
    /**
     * 调整窗口适应浏览器视窗
     */
    let menu = $("#menu");
    let tool = $("#tool");
    let nav = $("#nav");
    let editor = $("#editor");
    let status = $("#statusbar")
    // 设置各个div的高度
    let totalHeight = $(window).height();
    let menuHeight = 0;
    if (menu.length > 0) {
        menuHeight = menu.height();
    }
    let toolHeight = 0;
    if (tool.length > 0) {
        toolHeight = tool.height();
    }
    let statHeight = 0;
    if (status.length > 0) {
        statHeight = status.height()
    }
    let midHeight = totalHeight - menuHeight - toolHeight - statHeight - 2;
    nav.height(midHeight);
    editor.height(midHeight);


    // 设置各个div的宽度
    let totalWidth = $(window).width() - 4;
    menu.width(totalWidth);
    tool.width(totalWidth);
    nav.width(Math.floor(totalWidth * 0.15));
    editor.width(totalWidth - nav.width() - 2);
    status.width(totalWidth);
    console.log("total|menu|tool|mid|stat = " + totalHeight + "|" + menuHeight + "|"
        + toolHeight + "|" + midHeight + "|" + statHeight);

    nav.css({left: "0", top: menu.outerHeight() + tool.outerHeight()});
    editor.css({left: nav.width(), top: menu.outerHeight() + tool.outerHeight()});


}



